<template>
    <div class="edu-page-warp">
        <condition-card @reset="reset" @search="onSubmit" label-width="110px">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('label.grade')">
                        <el-date-picker
                            v-model="queryForm.grade"
                            value-format="yyyy"
                            type="year"
                            :placeholder="$t('common.text.all')"
                            style="width: 100%"
                            @change="changeFaculty"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.college')">
                        <el-select
                            multiple
                            :collapse-tags="true"
                            v-model="queryForm.facultyList"
                            style="width: 100%;"
                            @change="changeFaculty"
                        >
                            <el-option
                                v-for="item in options.college"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.major')">
                        <el-select
                            v-model="queryForm.professionList"
                            style="width: 100%;"
                            multiple
                            :collapse-tags="true"
                        >
                            <el-option
                                v-for="item in options.major"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('label.trainingLevel')">
                        <el-select
                            v-model="queryForm.trainingLevelList"
                            style="width: 100%;"
                            multiple
                            :collapse-tags="true"
                        >
                            <el-option
                                v-for="item in options.trainingLevel"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.trainingCategory')">
                        <el-select v-model="queryForm.trainingCategoryList" style="width: 100%;" multiple>
                            <el-option
                                v-for="item in options.trainingCategory"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('dic.degreeType')">
                        <el-select v-model="queryForm.degreeType" style="width: 100%;">
                            <el-option
                                v-for="item in options.degreeType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('label.formLearning')">
                        <el-select v-model="queryForm.formLearning" style="width: 100%;">
                            <el-option
                                v-for="item in options.formLearning"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="入学形式">
                        <el-select v-model="queryForm.enrolMethods" style="width: 100%;">
                            <el-option
                                v-for="item in options.enrolMethods"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.isOverseas')">
                        <el-select v-model="queryForm.isOverseas" style="width: 100%;">
                            <el-option
                                v-for="item in options.isOverseas"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <!-- <el-col :span="8">
                    <el-form-item label="激活开始时间">
                        <el-date-picker
                            v-model="queryForm.activaStartTime"
                            type="datetime"
                            placeholder="开始时间"
                            style="width:100%"
                            value-format="timestamp"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="激活结束时间">
                        <el-date-picker
                            v-model="queryForm.activaEndTime"
                            type="datetime"
                            placeholder="结束时间"
                            style="width:100%"
                            value-format="timestamp"
                        ></el-date-picker>
                    </el-form-item>
                </el-col> -->
                <el-col :span="8">
                    <el-form-item label="激活开始时间">
                        <el-row type="flex" justify="center" align="middle">
                            <el-date-picker
                                v-model="queryForm.activaStartTime"
                                value-format="timestamp"
                                type="datetime"
                                placeholder="选择日期"
                            ></el-date-picker>
                            <span style="margin: 0 10px;">~</span>
                            <el-date-picker
                                v-model="queryForm.activaEndTime"
                                type="datetime"
                                value-format="timestamp"
                                placeholder="选择日期"
                            ></el-date-picker>
                        </el-row>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="方案名称">
                        <el-input v-model="queryForm.actConfigName" style="width: 100%;"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card shadow="never">
            <div class="edu-page-title">激活状态列表</div>
            <el-row>
                <el-col :span="4">
                    <el-input
                        v-model="queryForm.keyWord"
                        placeholder="请输入学生学号/姓名搜索"
                        @keyup.enter.native="onSubmit"
                        style="width:200px"
                    >
                        <i
                            class="el-icon-search"
                            slot="suffix"
                            style="margin-top:10px;cursor:pointer"
                            @click="onSubmit"
                        ></i>
                    </el-input>
                </el-col>
                <el-col :span="8">
                    <div class="empty-box"/>
                </el-col>
                <el-col :span="12">
                    <div class="float-right">
                        <el-button type="primary" @click="exportStu">导出</el-button>
                    </div>
                </el-col>
            </el-row>
            <edu-table
                :data="students"
                :selection="false"
                size="mini"
                style="width:100%"
                :order="false"
                @page-change="handleCurrentChange"
                :total="queryForm.total_"
                :pageSize="queryForm.pageSize_"
                :current-page="queryForm.pageNum_"
            >
                <el-table-column
                    prop="studentId"
                    label="学号"
                    fixed="left"
                    :show-overflow-tooltip="true"
                    width="100"
                />
                <el-table-column label="姓名" fixed="left" :show-overflow-tooltip="true" width="100">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>
                <el-table-column label="年级">
                    <template slot-scope="scope">{{ scope.row.grade }}</template>
                </el-table-column>
                <el-table-column label="学院" :show-overflow-tooltip="true" width="120">
                    <template slot-scope="scope">{{ scope.row.facultyI18n }}</template>
                </el-table-column>
                <el-table-column label="专业" :show-overflow-tooltip="true" width="120">
                    <template slot-scope="scope">{{ scope.row.professionName }}</template>
                </el-table-column>
                <el-table-column
                    label="导师"
                    prop="teacherName"
                    :show-overflow-tooltip="true"
                    width="120"
                ></el-table-column>
                <el-table-column label="培养层次" :show-overflow-tooltip="true" width="120">
                    <template slot-scope="scope">{{ scope.row.trainingLevelI18n }}</template>
                </el-table-column>
                <el-table-column
                    label="培养类别"
                    prop="trainingCategoryI18n"
                    :show-overflow-tooltip="true"
                    width="120"
                ></el-table-column>
                <el-table-column
                    :label="$t('dic.degreeType')"
                    prop="degreeTypeI18n"
                    :show-overflow-tooltip="true"
                    width="120"
                ></el-table-column>
                <el-table-column
                    label="学习形式"
                    prop="formLearningI18n"
                    :show-overflow-tooltip="true"
                    width="120"
                ></el-table-column>
                <el-table-column label="入学方式" :show-overflow-tooltip="true" width="120" prop="enrolMethodsI18n"></el-table-column>
                <el-table-column label="是否国际生" width="100" prop="isOverseasCh"></el-table-column>
                <el-table-column label="方案名称" width="120" prop="actConfigName"></el-table-column>
                <el-table-column label="激活时间" :show-overflow-tooltip="true" width="120">
                    <template slot-scope="scope">{{ getFormatDate(scope.row.activaTime) }}</template>
                </el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import { activationList, exportactivationList } from "common/src/api/studentinfo";
import moment from "moment";
export default {
    name: "activationStateQuery",
    data() {
        return {
            queryForm: {
                grade: null,
                facultyList: [],
                professionList: [],
                trainingLevelList: [],
                trainingCategoryList: [],
                degreeType: null,
                enrolMethods: null,
                formLearning: null,
                isOverseas: null,
                keyWord: null,
                activaStartTime: null,
                activaEndTime: null,
                actConfigName: "",
                pageSize_: 20,
                pageNum_: 1,
                total_: 0
            },
            options: {
                college: [],
                major: [],
                trainingLevel: [],
                trainingCategory: [],
                degreeType: [],
                enrolMethods: [],
                formLearning: [],
                isOverseas: []
            },
            students: []
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: [
                    "X_YX",
                    "X_PYCC",
                    "X_PYLB",
                    "isAborad",
                    "X_XWLX",
                    "X_XXXS",
                    "enrolType"
                ]
            };
            queryDic(data).then(res => {
                if (res.code == 200) {
                    UTILS.fillSelect(
                        {
                            college: "X_YX",
                            trainingLevel: "X_PYCC",
                            formLearning: "X_XXXS",
                            trainingCategory: "X_PYLB",
                            isOverseas: "isAborad",
                            degreeType: "X_XWLX",
                            enrolMethods: "enrolType"
                        },
                        res.data,
                        this.options
                    );
                }
            });
            this.onSubmit();
        },
        reset() {
            this.queryForm.grade = null;
            this.queryForm.facultyList = [];
            this.queryForm.professionList = [];
            this.queryForm.trainingLevelList = [];
            this.queryForm.trainingCategoryList = [];
            this.queryForm.degreeType = null;
            this.queryForm.enrolMethods = null;
            this.queryForm.formLearning = null;
            this.queryForm.isOverseas = null;
            this.queryForm.activaStartTime = null;
            this.queryForm.activaEndTime = null;
            this.queryForm.actConfigName = "";
            this.queryForm.keyWord = null;
        },
        onSubmit() {
            activationList(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.students = res.data.list;
                    this.queryForm.total_ = res.data.total_;
                }
            });
        },
        changeFaculty(val) {
            this.options.major = [];
            this.queryForm.professionList = [];
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["G_ZY"],
                filter: {
                    prefix: this.queryForm.facultyList,
                    specilaCode: 'XY2ZY',
                    grade: this.queryForm.grade,
                    facultys: this.queryForm.facultyList,
                    degreeType: this.queryForm.degreeType ? this.queryForm.degreeType : []
                    // specilaCode: "XY2ZY"
                }
            };
            queryDic(data).then(res => {
                if (res.code === 200)
                    UTILS.fillSelect({ major: "G_ZY" }, res.data, this.options);
            });
        },
        handleCurrentChange(val) {
            this.queryForm.pageSize_ = val.pageSize;
            this.queryForm.pageNum_ = val.pageNum;
            this.onSubmit();
        },
        exportStu() {
            window.open(exportactivationList(this.queryForm));
        },
        getFormatDate(val) {
            return val ? moment(val).format("YYYY-MM-DD HH:mm:ss") : null;
        }
    }
};
</script>
